<template>
  <div style="font-size: 16px;font-weight: 600;">
    <el-radio></el-radio>现场办证
  </div>
  <!-- <div style="display: flex;margin-left: 80px;margin-top: 20px;">
      <div style="width: 1500px">
        <div style="display: flex">
          <button style="display: block" @click="executeOpenMedia">开启摄像头</button>
          <button style="display: block" @click="executeCloseMedia">关闭摄像头</button>
          <button style="display: block" @click="executeTakePhoto">拍照</button>
        </div>
        <video :style="camera? openCamera : closeCamera" id="video" width="200px" height="200px"
          autoplay="autoplay"></video>
      </div>
    </div> -->
  <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()" style="margin-top: 20px;"
    label-width="120px">
    <!-- 按钮 -->
    <el-col>
      <el-form-item label="类型">
        <el-radio-group v-model="state.dataForm.selectedRegion">
          <el-radio label="国内">国内</el-radio>
          <el-radio label="国外">国外</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-col>
    <el-col>
      <!-- 展会 -->
      <el-form-item label="展会名称">
        <el-input placeholder="展会名称" disabled clearable v-model="state.dataForm.exhibitionName"
          style="width: 240px;"></el-input>
      </el-form-item>
    </el-col>
    <!-- 手机号 -->
    <el-col>
      <el-form-item label="手机号" prop="col1">
        <el-input placeholder="手机号" clearable v-model="state.dataForm.col1" style="width: 240px;"></el-input>
      </el-form-item>
    </el-col>
    <!--证件编码 -->
    <el-col>
      <el-form-item label="证件编码" prop="col20">
        <el-input placeholder="证件编码" clearable v-model="state.dataForm.col20" style="width: 240px;"></el-input>
      </el-form-item>
    </el-col>
    <el-col>
      <!-- 公司 -->
      <el-form-item label="公司" prop="col2">
        <el-input placeholder="公司" clearable v-model="state.dataForm.col2" style="width: 240px;"></el-input>
      </el-form-item>
    </el-col>
    <el-col>
      <!-- 姓名-->
      <el-form-item label="姓名" prop="col3">
        <el-input placeholder="姓名" clearable v-model="state.dataForm.col3" style="width: 240px;"></el-input>
      </el-form-item>
    </el-col>
    <el-col>
      <!-- 身份证号-->
      <el-form-item label="身份证号">
        <el-input placeholder="身份证号" clearable v-model="state.dataForm.col56" style="width: 240px;"></el-input>
      </el-form-item>
    </el-col>
    <!--主营产品 -->
    <el-col>
      <el-form-item label="主营产品">
        <el-input placeholder="主营产品" clearable v-model="state.dataForm.col12" style="width: 240px;"></el-input>
      </el-form-item>
    </el-col>
    <el-col>
      <!--来源 -->
      <el-col>
        <el-form-item label="来源">
          <el-input placeholder="来源" clearable v-model="state.dataForm.lyRemark" disabled
            style="width: 240px;"></el-input>
        </el-form-item>
      </el-col>
      <el-col></el-col>
      <!--权益 -->
      <el-form-item label="权益">
        <el-input type="textarea" placeholder="权益" clearable style="width: 240px;" v-model="state.dataForm.col61"
          disabled></el-input>
      </el-form-item>
    </el-col>
    <el-col>
      <!--备注-->
      <el-form-item label="备注">
        <el-input placeholder="备注" clearable v-model="state.dataForm.col10" style="width: 240px;"></el-input>
      </el-form-item>
    </el-col>
  </el-form>
  <!-- 确认 -->
  <el-form-item>
    <div style="margin-left: 120px;">
      <el-button type="primary" @click="saveOrUpdCard">保存</el-button>
      <!-- <el-button>取消</el-button> -->
    </div>
  </el-form-item>
</template>

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import baseService from "@/service/baseService";
import { ref, nextTick, reactive, toRefs, watch } from 'vue';
import useView from "@/hooks/useView";
import { useRoute } from 'vue-router';

const view = reactive({
  getDataListURL: '/tccc/reportDescribeTelCdr',
  getDataListIsPage: true,
  deleteURL: "/crm/crmperson",
  deleteIsBatch: true,
  exportURL: "/tccc/export",
  daterange: null,
  dataForm: {
    id: "",
    template: "",
    exhibitionName: useRoute().query.exhibitionName,
    selectedRegion: "国内",
    tid: useRoute().query.tid,
    col1: "",
    col2: "",
    col20: "",
    col3: "",
    col56: "",
    col12: "",
    lyRemark: "",
    col10: "",
    col61: "",
  },
});


//保存
const saveOrUpdCard = async () => {
  const { col1, col20, col2, col3, col56 } = state.dataForm;

  if (!state.dataForm.tid) {
    ElMessage.error('展会不能为空！');
    return;
  }

  if (col1 && col1 !== '0' && !col1.match(/^1[3-9]\d{9}$/)) {
    ElMessage.error('手机号格式不正确！');
    return;
  }

  const matchReg = /^JN-+.{2}-\d{6}$/;
  if (!matchReg.test(col20)) {
    ElMessage.error('证件编码格式不正确');
    return;
  }

  if (!col2) {
    ElMessage.error('公司不能为空！');
    return;
  }

  if (!col3) {
    ElMessage.error('姓名不能为空！');
    return;
  }

  if (col56 != '' && col56 != null) {
    const format = /^(([1][1-5])|([2][1-3])|([3][1-7])|([4][1-6])|([5][0-4])|([6][1-5])|([7][1])|([8][1-2]))\d{4}(([1][9]\d{2})|([2]\d{3}))(([0][1-9])|([1][0-2]))(([0][1-9])|([1-2][0-9])|([3][0-1]))\d{3}[0-9xX]$/;
    if (!format.test(col56)) {
      ElMessage.error('身份证号格式不正确！');
      return;
    }

    if (!state.dataForm.id) {
      try {
        const response = await baseService.post('h5/testIdCard', {
          'huiyibmb_canhren': state.dataForm.col3,
          'huiyibmb_idcardno': state.dataForm.col56,
          'phone': state.dataForm.col1,
          'tid': state.dataForm.tid
        });
        if (response.data.code !== 200) {
          ElMessage.error(response.data.msg);
        }
      } catch (error) {
        console.error('实名认证请求出错:', error);
        ElMessage.error('实名认证请求出错，请稍后再试');
      }
    }
  }

  if (!state.dataForm.id) {
    try {
      const response = await baseService.post('noc/nocmember/userIsExit', state.dataForm);
      if (response.data.code === 0) {
        ElMessageBox.alert('证件编码已经存在，请更换！', '提示', {
          confirmButtonText: '确定'
        });
      } else {
        const saveResponse = await baseService.post('noc/nocmember/saveCard', state.dataForm);
        if (saveResponse.data.code === 0) {
          ElMessage.success('操作成功');
        } else {
          ElMessageBox.alert(saveResponse.data.msg, '提示', {
            confirmButtonText: '确定'
          });
        }
      }
    } catch (error) {
      ElMessage.error('请求出错，请稍后再试');
    }
  } else if (state.dataForm.id) {
    try {
      const updateResponse = await baseService.post('noc/nocmember/updateCard', state.dataForm);
      if (updateResponse.data.code === 0) {
        ElMessage.success('操作成功');
      } else {
        ElMessageBox.alert(updateResponse.data.msg, '提示', {
          confirmButtonText: '确定'
        });
      }
    } catch (error) {
      ElMessage.error('请求出错，请稍后再试');
    }
  }
};

const state = reactive({ ...useView(view), ...toRefs(view) });
</script>

<style>
.el-textarea__inner {
  height: 90px;
}
</style>